<page-header class="bg-purple-500"></page-header>

<ng-container *ngFor=" let group of icons | keyvalue; trackBy: trackByIcon">
  <mat-card>
    <mat-card-header>
      <mat-card-title class="text-capitalize m-b-16 text-gray-500">{{group.key}}</mat-card-title>
    </mat-card-header>
    <mat-card-content>
      <div class="row">
        <div class="col-4 col-sm-3 col-md-2 col-xl-1" *ngFor="let icon of group.value">
          <div class="text-center">
            <mat-icon class="icon-36">{{icon}}</mat-icon>
            <p class="f-s-12">{{icon}}</p>
          </div>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</ng-container>
